<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title data-index="0" id="selextTitle">${网页标题 }</title>
<meta name="keywords" content="${网页关键词}">
<meta name="description" content="${网页描述 }" />
<!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
<link href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="${path }/resource/css/styleOne/animate.min.css" rel="stylesheet" type="text/css" />
<link href="${path }/resource/css/visitor/base.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="${浏览器logo }">
<style>
  .banner{width: 100%;}
    .banner img{width: 100%;}
    .zj{margin-top: 20px;}
    .zj li{position: relative}
    .zj .wrap{margin-top: 80px;border: 1px solid #ddd;width: 340px;box-shadow: 2px 2px 5px rgba(0,0,0,0.2)}
    .zj .wrap .top{height: 20px;width: 100%;background: #e8e8e8;padding-left: 10px;line-height: 15px;}
    .zj .wrap .top .dot{width: 6px;height: 6px;background: #cccccc;display: inline-block;border-radius: 50%;}
    .zj .wrap .PCimg-wrap{width: 339px;height: 232px;overflow: hidden;position: relative;cursor: pointer;}
    .zj .wrap .PCimg-wrap img{width: 100%;position: absolute;}
        .phone {position: absolute;top:174px;right: 6px;background: url("${path }/resource/images/mobile-bg1.png") no-repeat;background-size: 100% 100%;
        width: 90px;  height:164px;overflow: hidden;}
    .phone .img-wrap {width: 82px;position: absolute;left: 4px;top: 17px; overflow: hidden;height: 130px;border: 1px solid #e8ebf0;  }
    .phone .img-wrap img{width: 100%;position: absolute;cursor: pointer}
    .pages{float: right;margin: 60px 0 80px;}
    .pages a{cursor:pointer;border-radius:4px;border:1px solid #fff;color: #999999;width: 28px;height: 28px;line-height: 28px;  text-align: center;display: inline-block}
    .pages a.active{background: #4095dd;color: #ffffff}
    /* .pages a:hover{background: #f6f6f6;border: 1px solid #ececec} */
</style>
</head>
<body class="">
<form class="navbar-form search"  id="dataform" onsubmit="javascripr:return false;" style="display:none">
        <div class="search">
			<input type="hidden" name="offset" id="_offset"  value="0" />
			<input type="hidden" id="limit" name="limit"   value="10" />
			<input type="hidden" id="artTypeId" name="artTypeId" value="41"/>
		</div>
        <div class="form-group">
            <input type="text" name="title" class="form-control" placeholder="请输入标题">
			<button class="btn btn-info" onclick="Pagination.serchDate()">搜索</button>
        </div>
        
    </form>
	<jsp:include page="_top.jsp"></jsp:include>
	<div class="banner">
		<cms:ad var="ban" code="moban-banner" multi="false"></cms:ad>
		<img alt="" src="${ban.adImg }">
  	</div>

	<div id="app">
		  <div class="container">
    <ul class="zj row">
      <li v-for="art in arts" class="col-md-4">
        <div class="wrap" >
            <div class="top">
              <span class="dot"></span>
              <span class="dot"></span>
              <span class="dot"></span>
            </div>
            <div class="PCimg-wrap" onmouseover=down(this,4000) onmouseout=up(this,2000)>
              <img :src="art.artImage" alt="" />
            </div>
        </div>
        <div class="phone" >
          <div class="img-wrap" onmouseover=down(this,4000) onmouseout=up(this,2000)>
            <img :src="art.artLables" alt=""/>
          </div>
        </div>
      </li>
    </ul>
    <div class="pages" id="pagingBox"></div>
  </div>
		
	</div>
	<jsp:include page="_foot.jsp"></jsp:include>
	<script type="text/javascript"
		src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
	<script type="text/javascript"
		src="${path }/resource/js/systools/AjaxProxy.js"></script>
	<script type="text/javascript"
		src="${path }/resource/js/systools/MForm.js"></script>
	<script type="text/javascript"
		src="${path }/resource/model/js/Pagination.js"></script>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script>
		function down(a,m) {
	        var h=$(a).children("img").innerHeight()-$(a).outerHeight();
	       $(a).children("img").stop().animate({top:-h},m);
	    }
		function up(a,m) {
		      $(a).children("img").stop().animate({top:0},m);
		}
		$(document).ready(function(){
			$("#toTop").click(function() {
			      $('body,html').animate({scrollTop:0},500);
			    })
			    
			    $(".suspend").mouseover(function() {
			        $(this).stop();
			        $(this).animate({width: 156}, 400);
			    });
			    $(".suspend").mouseout(function() {
			        $(this).stop();
			        $(this).animate({width: 36}, 400);
			    });
		})
		

	    $("#nav").find("li").eq(1).addClass("active");
	    var app =  new Vue({
			el : '#app',
			data : {
				arts:[],
				currentArt:{}
			},
			methods : {
				toArticle : function(id) {
					window
							.open("${path}/redirect/article?id="
									+ id);
				},
				loadArt:function(){
					var pageSize = 10;
					Pagination.init({
						url : "${path}/findNews?artTypeId=41",
						pageSize : pageSize,
						builderDate : function(loj) {
							
							app.arts = loj.getValue("rows");
							console.log(app.arts)
						} 
					}).serchDate();
					
				}, 
			},
		});
		app.loadArt();
	</script>
	
</body>
</html>
